<template>
    <div id='question2'>
        <div class='test_bt_zhe' v-if='showTitle' style=' -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>
            <span>四、计算分析题（本类题共2小题，第1小题10分，第2小题12分，共22分。凡要求计算的，应有必要的计算过程；计算结果出现两位以上小数的，均四舍五入保留小数点后两位小数。凡要求编制会计分录的，除题中有特殊要求外，只需写出一级科目。答案中的金额单位用万元表示。请在指定答题区域内作答）</span>
        </div>
        <div class='test_controls' style=' -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>
            <ul>
                <li>
                    <span>第 2 题</span>
                </li>
                <li>
                    <span class='maxTg mmTg' @click='maxTgTop' v-if='maxOrMin'>放大窗口</span>
                    <span class='minTg mmTg' @click='minTgTop' v-if='!maxOrMin'>恢复窗口</span>
                </li>
                <li>
                    <span class='clearTg' @mousedown='clickUnMake'>取消标记</span>
                </li>
                <li>
                    <span class='markTg' @mousedown='clickMake'>标记文字</span>
                </li>
                <li @click='showTItle' :class="!showTitle?'hiddenTitle':''"></li>
            </ul>
        </div>
        <div class='test_stem' ref='stem' :style="{height:stemHeight,cursor:cur?'s-resize':'default','user-select':userSelect?'none':'text'}" @mousemove="moveStem($event)"
        >
            <span>
                西山公司2011年度和2012年度与长期股权投资相关的资料如下：

                （1）2011年度有关资料：

                    ①1月1日，西山公司以银行存款5 000万元自甲公司股东购入甲公司10%有表决权股份。当日，甲公司可辨认净资产的公允价值和账面价值均为48 000万元。西山公司在取得该项投资前，与甲公司及其股东不存在关联方关系，取得该项投资后，对甲公司不具有重大影响；甲公司股份在活跃市场没有报价，其公允价值不能可靠确定。

                    ②4月26日，甲公司宣告分派现金股利3 500万元。

                    ③5月12日，西山公司收到甲公司分派的现金股利，款项已收存银行。

                    ④甲公司2011年度实现净利润6 000万元。

                （2）2012年度有关资料：

                    ①1月1日，西山公司以银行存款9 810万元和一项公允价值为380万元的专利权（成本为450万元，累计摊销为120万元），自甲公司其他股东购入甲公司20%有表决权股份。当日，甲公司可辨认净资产的账面价值为50 500万元，公允价值为51 000万元，其差额全部源自存货的公允价值高于其账面价值。西山公司取得甲公司该部分有表决权股份后，按照甲公司章程有关规定，派人参与甲公司的财务和生产经营决策。

                    ②4月28日，甲公司宣告分派现金股利4 000万元。

                    ③5月7日，西山公司收到甲公司分派的现金股利，款项已收存银行。

                    ④甲公司2012年度实现净利润8 000万元。年初持有的存货已对外出售60%。

                （3）其他资料：

                    ①西山公司除对甲公司进行长期股权投资外，无其他长期股权投资。

                    ②西山公司和甲公司采用相一致的会计政策和会计期间，均按净利润的10%提取盈余公积。

                    ③西山公司对甲公司的长期股权投资在2011年度和2012年度均未出现减值迹象。

                    ④西山公司与甲公司之间在各年度均未发生其他交易。

                除上述资料外，不考虑其他因素。
                <br/>
                <span style='font-weight:bold;'>要求：</span>
            </span>
        </div>
        <div class='test_answer_controls' style=' -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;'>
            <div class='tools'>
                <ul>
                    <li><span class='copy' @click='clickCopy'>复制</span></li>
                    <li><span class='cut'>剪切</span></li>
                    <li><span class='paste'>粘贴</span></li>
                    <li>
                        <span class='symbols' @click='clickSymbols'>公式和符号</span>
                        <div class='gs' @mouseleave="mouseCloseSyem" v-if='symbolShow'>
                            <div class="arrow"></div>
                            <div class="gs_tit">
                                <ul>
                                    <li v-for='(item,index) in liBtn' 
                                    :key='index' id="twoo1" 
                                    :class="liactive == index?'li_active_btn':''" style="float:left;" >
                                        <input 
                                        @click='clickSysHandle(index)'
                                        class="gs_an gs_btn" 
                                        type="button" :value="item">
                                    </li>
                                </ul>
                            </div>
                            <div class='gs_nr'>
                                <ul v-show='liactive == 0'>
                                    <li v-for='(item,index) in 13' :key='index'
                                    :style="{backgroundPosition:index<9?index*-34+'px -136px':(index-9)*-34+'px -170px'}"></li>
                                </ul>
                                <ul v-show='liactive == 1'>
                                    <li v-for='(item,index) in 19' :key='item'
                                    :style="{backgroundPosition:index<9?index*-34+'px 0px':index<18 && index>8?(index-9)*-34+'px -34px':(index-16)*-34+'px -102px'}"></li>
                                </ul>
                                <ul v-show='liactive == 2'>
                                    <li v-for='(item,index) in 11' :key='item'
                                    :style="{backgroundPosition:index<9?index*-34+'px -68px':(index-9)*-34+'px -102px'}"></li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li><span class='cal' @click='showCal'>计算器</span></li>
                    <li>
                        <span class='maxTg mmTg' v-if='maxOrMin' @click='maxTgTBot'>放大窗口</span>
                        <span class='minTg mmTg' v-if='!maxOrMin' @click='minTgTop'>恢复窗口</span>
                    </li>
                    <li><span class='help' @click='showDialogs'>帮助</span></li>
                </ul>
            </div>
            <div class='ask'>
                <ul>
                    <li v-for='(item,index) in 4' :key='index' @click='clickLiHandle(index)' 
                        :class="index == activeIndex ? 'activeLi': ''"
                    >
                        要求({{index+1}})
                    </li>
                </ul>
            </div>
        </div>
        <div class='test_answer' :style='{height:answerHeight}'>
            <ul>
                <template v-for='(item,index) in stemList'>
                    <li  :key='index' 
                v-if="activeIndex == index">
                    {{item}}
                    <span>请在下方答题区域内作答。</span>
                </li>
                </template>
            </ul>
            <div class='test_area'>
                <template v-for='(item,index) in stemList'>
                    <textarea name="" :key='index' id="" style='resize:none' v-if="activeIndex == index" v-model="answer[index]"></textarea>
                </template>
                
            </div>
        </div>
        <div class='helpDialog' v-if='showDialog' v-drag>
            <div id="popup_drag" style="width:687px;height: 28px; line-height:28px; font-size:14px;background:#2b94f0;cursor:move">
                <span id="popup_exit" style="float:right;margin-right:10px;cursor:pointer" @click='closeDialog'>关闭</span>  	
            </div>
            <div id="gsHelpDiv" style="width:687px;height:500px; overflow:auto;background:#fff;">
                <img width="670" src="../assets/images/1.jpg"><br/>
                <img width="670" src="../assets/images/2.jpg"><br/>
                <img width="670" src="../assets/images/3.jpg"><br/>
                <img width="670" src="../assets/images/4.jpg"><br/>
                <img width="670" src="../assets/images/5.jpg"><br/>
                <img width="670" src="../assets/images/6.jpg">
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'Question2',
    data(){
        return{
            showTitle:true,//显示题干
            stemHeight:'',//题干部分高度
            answerHeight:'',//答案部分高度
            activeIndex:0,//选中项
            maxOrMin:true,//放大或者恢复窗口
            showDialog:false,
            cur:false,
            userSelect:false,
            liactive:0,
            symbolShow:false,
            stemList:[
                '分别确定西山公司2011年度和2012年度核算长期股权投资的方法。',
                '逐项编制西山公司2011年度与长期股权投资有关的会计分录。',
                '逐项编制西山公司2012年度与长期股权投资有关的会计分录。',
                '计算西山公司2012年12月31日资产负债表“长期股权投资”项目的期末数。（“长期股权投资”科目要求写出明细科目；答案中的金额单位用万元表示）'
            ],
            answer:['','','',''],
            liBtn:['常用公式','数学符号','希腊字母'],
        }
    },
    methods:{
        //点击出现公式
        clickSymbols(){
            this.symbolShow = true
        },
        //划走时公式版消失
        mouseCloseSyem(){
            this.symbolShow = false
        },
        //点击切换公式，字符
        clickSysHandle(index){
            this.liactive = index;
        },
        //是否显示题干
        showTItle(){
            this.showTitle = !this.showTitle
        },
        leaveStem(e){
            // console.log(e)
        },
        //切换要求按钮
        clickLiHandle(index){
            this.activeIndex = index;
        },
        //上面部分放大窗口
        maxTgTop(){
            this.maxOrMin = false;
            this.stemHeight = this.questionHeight+'px';
        },
        //缩小窗口
        minTgTop(){
            this.maxOrMin = true;
            this.stemHeight = this.questionHeight*0.4+'px';
            this.answerHeight = this.questionHeight*0.28+'px';
        },
        //下面部分放大窗口
        maxTgTBot(){
            this.maxOrMin = false;
            this.stemHeight = this.questionHeight*0.005+'px';
            this.answerHeight = this.questionHeight*0.623+'px';
        },
        //选中标记和取消标记
        makeColor(colour){
            if (window.getSelection) {
                // IE9 and non-IE
                try {
                    if (!document.execCommand("BackColor", false, colour)) {
                        this.makeEditableAndHighlight(colour);
                    }
                } catch (ex) {
                    this.makeEditableAndHighlight(colour);
                }
            } else if (document.selection && document.selection.createRange) {
                // IE <= 8 case
                range = document.selection.createRange();
                range.execCommand("BackColor", false, colour);
            }
        },
        makeEditableAndHighlight(colour){
            var range, sel = window.getSelection();
            if (sel.rangeCount && sel.getRangeAt) {
                range = sel.getRangeAt(0);
            }
            document.designMode = "on";
            if (range) {
                sel.removeAllRanges();
                sel.addRange(range);
            }
            document.execCommand("BackColor", false, colour);
            if (!document.execCommand("HiliteColor", false, colour)) {
                console.log('color')
                document.execCommand("BackColor", false, colour);
            }
            document.designMode = "off";
        },
        clickMake(){
            this.makeColor('yellow')
        },
        clickUnMake(){
            this.makeColor('white')
        },
        //显示帮助模板层
        showDialogs(){
            this.showDialog = true;
        },
        //关闭帮助模板层
        closeDialog(){
            this.showDialog = false
        },
        //上下拉动
        moveStem(e){
            let height = parseInt(this.stemHeight.split('p')[0])+20;
            if(e.offsetY > height-2 && e.offsetY < height+5){
                console.log('cur');
                this.cur = true;
                this.$refs.stem.onmousedown = this.mouseDownStemHandle
            }else{
                this.cur = false;
                this.$refs.stem.onmousedown = null;
            }
        },
        mouseDownStemHandle(e){
            this.userSelect = true;
            console.log('1-1')
            document.addEventListener('mousemove',this.mouseMove);
            document.addEventListener('mouseup',this.mouseUp);
        },
        mouseMove(e){
            if(e.offsetY<20) {
                console.log('1-2')
                this.$refs.stem.onmousedown = null;
                document.removeEventListener('mousemove',this.mouseMove);
                return;
            };
            this.stemHeight = e.offsetY+'px';
            this.answerHeight = (this.questionHeight*0.628 - e.offsetY)+'px';
        },
        mouseUp(e){
            console.log('remove')
            this.userSelect = false;
            document.removeEventListener('mousedown',this.mouseDownStemHandle);
            console.log(document)
            document.removeEventListener('mousemove',this.mouseMove);
            document.removeEventListener('mouseup',this.mouseUp);
        },
        //复制
        clickCopy(){
            let g = window.getSelection().toString();
            console.log(g)
        },
        //计算器
        showCal(){
            try {
            var objShell = new ActiveXObject("wscript.shell");
            objShell.Run("calc");
            objShell = null;
            }
            catch (e){
            alert('不能正确打开计算器，请自行启动系统计算器')
            }
      },
    },
    props:['type','testNum','questionHeight'],
    created(){
        this.stemHeight = this.questionHeight*0.4+'px';
        this.answerHeight = this.questionHeight*0.28+'px';
    },
    directives:{
        drag:{
            bind(el){
                el.onmousedown =function(e){
                    if(e.target.id !== 'popup_drag') return;
                    var x = e.clientX - el.offsetLeft;
                    var y = e.clientY - el.offsetTop;
                    document.onmousemove = function(e){
                        el.style.left = e.clientX - x + 'px';
                        el.style.top = e.clientY - y +'px';
                    }
                    document.onmouseup = function(){
                        document.onmousemove = document.onmousedown = null;
                    } 
                    e.preventDefault();
                }
            }
        }
    },

}
</script>

<style lang="less" scoped>
    #question2{
       height:100%;
       margin:1px;
       overflow: auto;
    //    display:flex;
    //    flex-direction:column;
       color:#000;
       .test_bt_zhe{
            font-weight: normal;
            color: #333333;
            font-size: 12pt;
            line-height: 1.5;
            padding-left: 20px;
            margin: 0px;
            text-align: left;
            font-family: '黑体';
            span{
                display:inline-block;
                line-height:25pt;
                margin:0 0 0 24pt;
                text-indent:-24pt;
            }
       }
       .test_controls{
            font-size: 12px;
            font-weight: bolder;
            padding-left: 2px;
            line-height: 20px;
            height: 20px;
            border-bottom: 1px solid #9fb7f7;
            border-top: 1px solid #9fb7f7;
            ul{
                height:100%;
                overflow:hidden;
                padding-right:20px;
                padding-left:40px;
                font-weight: normal;
                li{
                    cursor: pointer;
                    float: right;
                    span{
                        font-weight: normal;
                        font-size: 12px;
                        color: #000;
                        text-decoration: none;
                        padding-left: 20px;
                        display: block;
                        z-index: 1;
                        margin-right: 8px;
                        font-family: '宋体';
                    }
                    &:nth-child(1){
                        float:left;
                        font-family: '黑体';
                        font-size: 14px!important;
                        font-weight: normal;
                        height: 14px;
                        span{
                            font-family: '黑体';
                            font-size: 14px;
                            font-weight: normal;
                            padding-left:0;
                        }
                    }
                    &:nth-last-child(1){
                        width: 94px;
                        height:15px;
                        background: url('../assets/images/sqtx.gif')
                    }
                    
                    .markTg{
                        background: url(../assets/images/zht_06.gif) 0px 4px no-repeat;
                    }
                    .clearTg{
                        background: url(../assets/images/zht_08.gif) 0px 4px no-repeat;
                    }
                    .maxTg{
                        background: url(../assets/images/max.png)  no-repeat;
                    }
                    .minTg{
                        background: url(../assets/images/min.png)  no-repeat;
                    }
                }
                .hiddenTitle{
                    background: url('../assets/images/zktx.gif')!important;
                }
            }
       }
       .test_stem{
            text-align: left;
            border-bottom: 6px solid #9fb7f7;
            background-color: #FFF;
            OVERFLOW-Y: scroll;
            overflow-x: hidden;
            padding: 10px 20px;
            WIDTH: 97%;
            z-index: 999;
            cursor: default;
            p{
                margin: 5px;
            }
       }
       .test_answer_controls{
           width:100%;
           background:url('../assets/images/zht_01.gif') repeat-x;
            // background:#f00;
           height: 25px;
        //    overflow: hidden;
           .tools{
               float:right;
               padding-right: 20px;
               height:100%;
               ul{
                   height:100%;
                   li{
                       float:left;
                       height:100%;
                       position: relative;
                       cursor:pointer;
                       span{
                            height:100%;
                            font-weight: normal;
                            font-size: 12px;
                            color: #000;
                            line-height: 2;
                            text-decoration: none;
                            padding-left: 20px;
                            display: block;
                            z-index: 1;
                            margin-right:10px;
                       }
                       .copy{
                           background:url('../assets/images/zht_14.gif') 0px no-repeat;
                       }
                       .cut{
                           background:url('../assets/images/zht_22.gif') 0px no-repeat;
                       }
                       .paste{
                           background:url('../assets/images/zht_24.gif') 0px no-repeat;
                       }
                       .symbols{
                           background:url('../assets/images/zht_26.gif') 0px no-repeat;
                       }
                       .cal{
                           background:url('../assets/images/ico_cal.png') 0px no-repeat;
                       }
                       .help{
                           padding-left:30px;
                           background:url('../assets/images/zht_07.gif') 0px 2px no-repeat;
                       }
                       .maxTg{
                           background:url('../assets/images/max.png') 0px no-repeat;
                       }
                       .minTg{
                           background:url('../assets/images/min.png') 0px no-repeat;
                       }
                       .gs{
                           position: absolute;
                           border-bottom: #c1cee3 1px solid;
                           right: -120px;
                           top: 20px;
                           width: 328px;
                           z-index: 4000;
                           .arrow{
                               margin: 0 auto;
                                margin-top: 5px;
                                display: block;
                                width: 15px;
                                height: 8px;
                                background: url('../assets/images/arraw.gif') no-repeat;
                           }
                            .gs_tit{
                                height: 22px;
                                line-height: 22px;
                                border-right: #c1cee3 1px solid;
                                background: url(../assets/images/gs_tit.gif) repeat-x;
                                margin: 0px;
                                border-left: #c1cee3 1px solid;
                                border-top: #c1cee3 1px solid;
                                width: 326px;
                                ul{
                                    li{
                                        cursor: pointer;
                                        font-size: 14px;
                                        // padding-top: 3px;
                                        height: 22px;
                                        float: left;
                                        font-weight: bold;
                                        text-align: center;
                                        margin-left: 10px;
                                        line-height: 22px;
                                        width: 93px;
                                        input{
                                            padding: 0px;
                                            margin: 0px;
                                            
                                            background: none transparent scroll repeat 0% 0%;
                                        }
                                        .gs_btn{
                                            width:100%;
                                            height:100%;
                                            border:none;
                                            outline: none;
                                            cursor:pointer;
                                        }
                                        
                                    }
                                    .li_active_btn{
                                            height: 22px;
                                            line-height: 22px;
                                            color: #ef8324;
                                            background: url(../assets/images/tab_zh_gs.png) no-repeat;
                                            width: 93px;
                                        }
                                }
                            }
                            .gs_nr{
                                overflow: hidden;
                                border-right: #c1cee3 1px solid;
                                padding-bottom: 10px;
                                padding-top: 10px;
                                padding-left: 10px;
                                border-left: #c1cee3 1px solid;
                                padding-right: 0px;
                                width: 316px;
                                background-color: #FFF;
                                clear: both;
                                li{
                                        cursor: pointer;
                                        border-top: #ccc 1px solid;
                                        height: 30px;
                                        border-right: #ccc 1px solid;
                                        background: url(../assets/images/math.png) no-repeat;
                                        border-bottom: #ccc 1px solid;
                                        float: left;
                                        margin: 0px 6px 6px 0px;
                                        border-left: #ccc 1px solid;
                                        width: 30px;
                                        text-indent: -9999px;
                                }
                            }
                       }
                   }
               }
           }
           .ask{
               height:100%;
               float:left;
               ul{
                   height:100%;
                //    overflow: hidden;
                   font-size: 12px;
                    font-weight: bolder;
                    padding-left: 2px;
                    line-height: 20px;
                   li{
                       float:left;
                       background: url('../assets/images/tab_zh1.png') no-repeat; 
                        width: 66px;
                        height: 25px;
                        margin-top: 5px;
                        text-align: center;
                        cursor: pointer;
                        letter-spacing: 2px;
                   }
                   .activeLi{
                       background: url('../assets/images/tab_zh2.png') no-repeat; 
                   }
               }
           }
       }
       .test_answer{
           width:100%;
        //    flex:1;
        //    display:flex;
        //    flex-direction:column;
           text-align: left;
            ul{
               width:100%;
               margin:14px 0;
               li{
                   line-height: 1.5;
                    font-size: 14px;
                    font-family:'宋体';
                    overflow: hidden;
                    span{
                        font-weight:bold;
                    }
               } 
            }
            .test_area{
                width:100%;
                height:100%;
                // background:#fff;
                textarea{
                    height:95%;
                    width:99%;
                    resize:none;
                    outline:none;
                    border:none;
                }
            }
       }
       .helpDialog{
            width: 687px;
            visibility: visible;
            display: block;
            position: absolute;
            height: auto;
            left: 835px;
            top: 20px;
            z-index: 479;
       }
    }
</style>
